<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垃圾种类管理</title>
  <!-- 引入样式 -->
  <link href="./plugins/Bootstrap4.6.1/css/bootstrap.css" rel="stylesheet">
  <link href="./favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="./css/main.css" rel="stylesheet">
  <!-- 引入组件库 -->
  <script src="./plugins/js/jquery.js"></script>
  <script src="./plugins/Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
  <script src="./plugins/js/vue.js"></script>
  <script src="./plugins/js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app" class="treashList m-auto">
  <h1 class="text-center m-auto ">垃圾种类管理</h1>
  <div class=" ml-auto mr-auto mt-2 mb-2">


    <form>
      <div class="row ">
        <div class="col text-right pr-0">
          <input type="text" class="form-control" v-model="findParameter.t_type" placeholder="垃圾种类名称">
        </div>
        <div class="col text-right">
          <input type="text" class="form-control" v-model="findParameter.recycle_price" placeholder="回收标准费用">
        </div>
        <div class="col text-left pl-0">
          <button type="button" class="btn btn-primary " @click="info()">查询</button>
        </div>
        <div class="col text-right">
          <button type="button" class="btn btn-success mr-4" @click="openModal(1)">新增</button>
        </div>
      </div>
    </form>
  </div>
  <table class=" text-center m-auto table table-hover  table-bordered" >

    <thead>
    <tr>
      <th scope="col">序号</th>
      <th scope="col">垃圾种类</th>
      <th scope="col">回收标准费用</th>
      <th scope="col">添加时间</th>
      <th scope="col">最后修改时间</th>
      <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(treash,index) in treashs">
      <th scope="row" >{{treash.t_id}}</th>
      <td>{{treash.t_type}}</td>
      <td>{{Number(treash.recycle_price)}}元</td>
      <td>{{treash.create_time}}</td>
      <td>{{treash.update_time}}</td>
      <td>
        <button type="button" class="btn btn-primary ml-3" @click="openModal(2,treash)">编辑</button>
        <button type="button" class="btn btn-danger ml-3 mr-3" @click="delTreash(treash.t_id)">删除</button>
      </td>
    </tr>

    </tbody>
  </table>

  <!-- 分页组件 -->
  <div class="row">
    <nav  class="col-9">
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous" @click="info(Number(page.currentPage)-1)">
            <span aria-hidden="true" >&laquo;</span>
          </a>
        </li>
        <li class="page-item" v-for="n in Math.ceil(page.total/page.pageSize)"><a class="page-link" href="#"  @click="info(n)">{{n}}</a></li>
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Next" @click="info(Number(page.currentPage)+1)">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
    <span class="col-3 mt-2">共{{page.total}}条记录</span>
  </div>


  <!-- 新增修改模态框 -->
  <div class="modal fade   " id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{treashEditFlag==1?'新增':'修改'}}垃圾种类</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-inline">
              <label for="exampleInputEmail1">垃圾种类</label>
              <input type="text" v-model="treashinfo.t_type" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp">
            </div>
            <div class="form-inline mt-3">
              <label for="exampleInputPassword1">回收标准费用</label>
              <input type="text" v-model="treashinfo.recycle_price" class="form-control " id="exampleInputPassword1">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" @click="addAndUpdateTreach()">确定</button>
        </div>
      </div>
    </div>
  </div>

</div>


</body>
<script>
  new Vue({
    el: '#app',
    data: {
      treashinfo: {}, // 新增修改时的参数
      treashs: [], // 种类列表
      page:{  // 分页参数
        currentPage:1,
        pageSize:5,
        total:0
      },
      findParameter:{   // 条件查询参数
        t_type: '',
        recycle_price: ''
      },
      treashEditFlag:1 // 区分新增修改操作的标记
    },
    created() {
      this.info();
    },
    methods: {
      info(currentPage) {
        if(currentPage){
          this.page.currentPage=currentPage<1?1:currentPage>Math.ceil(this.page.total/this.page.pageSize)?Math.ceil(this.page.total/this.page.pageSize):currentPage;
        }
        var url = "treash.php?action=getlist&currentPage="+this.page.currentPage+"&pageSize="+this.page.pageSize;
        // console.log(this.findParameter)
        // 拼接查询条件
        this.findParameter.t_type = this.findParameter.t_type.trim();
        this.findParameter.recycle_price = this.findParameter.recycle_price.trim();
        if(this.findParameter.t_type.length>0){
          url+="&t_type="+this.findParameter.t_type;
        }
        if(this.findParameter.recycle_price>0){
          url+="&recycle_price="+this.findParameter.recycle_price;
        }
        // console.log(url)
        // return;
        axios.get(url).then(res => {
          console.log(res);
          this.treashs = res.data.list;
          this.page = res.data.page;
          this.findParameter={
            t_type: '',
            recycle_price: ''
          };
        })
      },
      openModal(flag,t){
        console.log(this.treashEditFlag)
        this.treashinfo={};
        if(flag==2) {
          this.treashEditFlag=2;
          this.treashinfo.t_id=t.t_id;
          this.treashinfo.t_type=t.t_type;
          this.treashinfo.recycle_price=Number(t.recycle_price)
        }else {
          this.treashEditFlag=1;
        }
        console.log(this.treashEditFlag)
        $('#addModal').modal('show')
        console.log(this.treashEditFlag)
      },
      addAndUpdateTreach(){
        console.log(this.treashEditFlag)
        // 验证数据
        if(!this.treashinfo.t_type || this.treashinfo.t_type.trim() == ''){
            alert("种类名称不能为空");
            return;
        }
        this.treashinfo.recycle_price = String(this.treashinfo.recycle_price);
        if(!this.treashinfo.recycle_price || this.treashinfo.recycle_price.trim() == ''){
          alert("回收标准费用不能为空");
          return;
        }
        if(!(this.treashinfo.recycle_price>0)){
          alert("回收标准费用只能是大于0的数字");
          return;
        }
        this.treashinfo.t_type = this.treashinfo.t_type.trim();
        this.treashinfo.recycle_price = this.treashinfo.recycle_price.trim();
        console.log(this.treashEditFlag)
        // 新增时判断重名
        if(this.treashEditFlag==1){
          for( t in this.treashs){
            if(this.treashinfo.t_type == this.treashs[t].t_type){
              alert("种类名称已存在");
              return;
            }
            console.log(this.treashs[t])
          }
        }
        let f = this.treashEditFlag==1?'add':'update';
        axios.post("treash.php?action="+f,this.treashinfo).then(res=>{
          if(res.data > 0){
            alert("操作成功");
            $('#addModal').modal('hide');
          }else {
            alert("操作失败")
          }
        }).finally(this.info())// 关闭模态框
      },
      delTreash(id){
        if(confirm("确定要删除吗？")){
          axios.get("treash.php?action=del&t_id="+id).then(res=>{
            if(res.data > 0){
              alert("操作成功");
            }else {
              alert("操作失败")
            }
          }).finally(this.info())// 关闭模态框
        }
      }
    }
  })
</script>
</html>